<script setup lang="ts">
import SearchView from '@/components/SearchView.vue'
import NoteList from './NoteList.vue'
import { ref, reactive, onMounted, defineComponent } from 'vue'
import { useNoteStore } from '@/stores/modules/note'
import { useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'

const store = useNoteStore()
const { notes } = storeToRefs(store)
const { getNotes, searchNotes, deleteNote } = store
const state = reactive({
  page: 1,
  size: 15,
  delId: ''
})
const handleSearch = (val: string) => {
  searchNotes(val)
  console.log('search', val)
}
// setTimeout(() => {
getNotes({
  page: state.page,
  size: state.size
})
// }, 1000)

const isLoading = ref(false)
// 处理加载更多
const loadMore = async () => {
  console.log('**** loadMore **** ')
  isLoading.value = true
  state.page++
  await getNotes({
    page: state.page,
    size: state.size
  })
  isLoading.value = false
}

// 添加
let router = useRouter()
const clickAdd = () => {
  router.push({ path: '/addNote' })
}

const clickItem = (id: string) => {
  console.log(id)
  router.push({ path: '/addNote', query: { id } })
}

// 处理长按
const show = ref(false)
const longTouch = (id: string) => {
  show.value = true
  state.delId = id
}
// 处理删除
const handleDel = async () => {
  await deleteNote(state.delId)
  show.value = false
}
</script>

<template>
  <div class="note-box">
    <SearchView @on-search="handleSearch"></SearchView>
    <NoteList
      :notes="notes"
      @loadMore="loadMore"
      @toAddNote="clickItem"
      @longTouch="longTouch"
    ></NoteList>
    <div class="loading-box">
      <van-loading size="24px" v-show="isLoading" vertical>加载中...</van-loading>
    </div>
    <van-button round icon="plus" class="button" type="primary" @click="clickAdd"></van-button>
    <van-popup v-model:show="show" position="bottom" :style="{ height: '10%' }">
      <div class="delete-box" @click="handleDel">删除</div>
    </van-popup>
  </div>
</template>
<style lang="scss" scoped>
.note-box {
  width: 100%;
  overflow: hidden;
  flex: 1;
  padding: 0 0.1rem;
  box-sizing: border-box;
  .delete-box {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #1989fa;
    font-size: 0.23rem;
  }
  .button {
    position: fixed;
    bottom: 0.2rem;
    right: 0.2rem;
  }
  .van-button {
    width: 0.44rem;
    height: 0.44rem;
  }
  .loading-box {
    width: 100%;
    height: 30px;
    position: fixed;
    bottom: 0rem;
  }
}
</style>
